<!Doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts-X">
    <meta name="author" content="shenyi.914@gmail.com">
    <title>ECharts-X</title>

    <link rel="shortcut icon" href="../../img/favicon.png">

    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/article.css">
    <body>
        <header id="header">
            <h1><a href="../../index.html">ECharts-X</a></h1>
            <ul class="links">
                <li class="active">
                    <a href="./getting_started.html" target="_blank">Documentation</a>
                </li>
                <li><a href="../../example.html" target="_blank">Examples</a></li>
                <li><a href="https://github.com/ecomfe/echarts-x/" target="_blank">Github</a></li>
                <li><a href="http://echarts.baidu.com/" target="_blank">ECharts</a></li>
            </ul>
        </header>
        <main id="main">
            <nav id="nav" class="sidebar affix">
                <ul class="top">
                
                    
                    <li class="current">
                    
                        <a href="getting_started.html">Getting Started</a>
                    </li>
                
                    
                    <li>
                    
                        <a href="map3d.html">Map 3D</a>
                    </li>
                
                    
                    <li>
                    
                        <a href="markpoint.html">Mark Point</a>
                    </li>
                
                    
                    <li>
                    
                        <a href="markbar.html">Mark Bar</a>
                    </li>
                
                    
                    <li>
                    
                        <a href="markline.html">Mark Line</a>
                    </li>
                
                </ul>
            </nav>
            <article id="article">
                <h1>Getting Started</h1>
                <p>ECharts-X 的定位是 ECharts 的扩展，因此在使用和配置项上跟 ECharts 上尽量保持一致，可以使用 ECharts 中的组件比如<code>legend</code>, <code>dataRange</code>。也可以和 ECharts 中的折柱饼图混搭。不过当然在引入 ECharts-X 前需要先引入 ECharts，如果之前没有使用过 ECharts，可以先去了解 ECharts 的<a href="http://echarts.baidu.com/doc/start.html">入门教程</a>，或者看看 ECharts 的诸多<a href="http://echarts.baidu.com/doc/example.html">示例</a>。</p>
<h2 id="-echarts-x">获取 ECharts-X</h2>
<p>你可以从多种途径获取 ECharts-X，最简单的方式就是<a href="http://echarts.baidu.com/x/build/echarts-x-0.2.0.zip">从官网下载</a>。</p>
<p>同时 ECharts-X 也托管在 <a href="https://github.com/pissang/echarts-x">GitHub</a> 上，你可以直接下载最新的 <a href="https://github.com/pissang/echarts-x/releases">Release</a> 版本。或者如果想要一直保持代码是最新的，你也可以直接从 clone 下来出整个代码仓库。</p>
<h2 id="-echarts-x">引入 ECharts-X</h2>
<p>ECharts-X 也是使用 <a href="https://github.com/ecomfe/echarts-optimizer">echarts-optimizer</a> 构建，因此引入方式同 ECharts 相同。关于如何在项目中引入 ECharts 可以参见 <a href="http://echarts.baidu.com/doc/doc.html#引入ECharts">引入ECharts</a>。里面描述了三种不同的引入方式，ECharts-X 目前只支持模块化包引入和模块化单文件引入。</p>
<h3 id="-">模块化包引入</h3>
<p>除了 <a href="https://github.com/ecomfe/echarts">ECharts</a> 和 <a href="https://github.com/ecomfe/zrender">ZRender</a>, ECharts-X 还依赖 WebGL 库 <a href="https://github.com/pissang/qtek">qtek</a>，同样的你可以下载最新的 release 版本，或者使用 git 工具 clone 整个 <a href="https://github.com/pissang/qtek">qtek</a>。</p>
<p>把这三个依赖库加上 <a href="https://github.com/pissang/echarts-x">ECharts-X</a> 下载下来后，我们这里先假设你把这四个项目的目录放在一个目录 <code>project/dep</code> 下，而 <code>index.html</code> 放在 <code>project</code> 下，那么可以如下配置 ESL 或者 RequireJS 的 <code>packages</code>:</p>
<pre><code class="lang-javascript">require.config({
    packages: [{
        name: &#39;echarts&#39;,
        location: &#39;dep/echarts/src&#39;,
        main: &#39;echarts&#39;
    }, {
        name: &#39;zrender&#39;,
        location: &#39;dep/zrender/src&#39;,
        main: &#39;zrender&#39;
    }, {
        name: &#39;qtek&#39;,
        location: &#39;dep/qtek/src&#39;,
        // 这里需要是 qtek.amd, 如果是 qtek 会
        // 引入所有 qtek 的模块，会导致项目体积过大
        main: &#39;qtek.amd&#39;
    }, {
        name: &#39;echarts-x&#39;,
        location: &#39;dep/echarts-x/src&#39;,
        main: &#39;echarts-x&#39;
    }]
})
</code></pre>
<h3 id="-">模块化单文件引入(推荐)</h3>
<p>打包好后的单文件在 <code>build</code> 目录下</p>
<pre><code class="lang-javascript">&lt;body&gt;
    &lt;div id=&quot;main&quot;&gt;&lt;/div&gt;
    &lt;!-- 必须要先引入 ECharts 主文件 --&gt;
    &lt;script src=&quot;dep/echarts/build/echarts.js&quot;&gt;&lt;/script&gt;
    &lt;!-- 引入 ECharts-X 主文件 --&gt; 
    &lt;script src=&quot;dep/echarts-x/build/echarts-x.js&quot;&gt;&lt;/script&gt;

    &lt;script type=&quot;text/javascript&quot;&gt;
        // 配置后续加载的各种 chart 配置 config
        require.config({
            paths: {
                &#39;echarts&#39;: &#39;dep/echarts/build&#39;,
                &#39;echarts-x&#39;: &#39;dep/echarts-x/build&#39;
            }
        });

        // 然后就可以动态加载图表进行绘制啦
        require([
            &#39;echarts&#39;,
            &#39;echarts-x&#39;,
            // ECharts-X 中 map3d 的地图绘制基于 ECharts 中的 map。
            &#39;echarts/chart/map&#39;,
            &#39;echarts-x/chart/map3d&#39;
        ], function (ec) {
            // 跟 ECharts 一样的方式初始化
            var myChart = ec.init(document.getElementById(&#39;main&#39;));
            ...
        })
    &lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>尽管跟 ECharts 相比看起来麻烦了很多，但是如果你了解 AMD 规范的加载器，或者之前有用 ECharts 做过开发的话，相信你很快就能上手了。</p>
<h2 id="a-simple-example">A Simple Example</h2>
<p>引入 ECharts 后就可以写一个简单的例子了。文章开头提过 ECharts-X 的使用方式跟 ECharts 是一样的，这里不再赘述，如下代码就可以画出一个简单的地球啦。</p>
<pre><code class="lang-javascript">var chart = echarts.init(document.getElementById(&#39;main&#39;));

chart.setOption({
    title: {
        text: &#39;A Simple Example&#39;
    },
    series: [{
        type: &#39;map3d&#39;,
        // Empty data
        data: [{}]
    }]
})
</code></pre>
<p>更多的示例可以访问<a href="../../example.html">示例代码</a></p>
<h2 id="-webgl">判断浏览器是否支持 WebGL</h2>
<p>ECharts-X 需要浏览器支持 WebGL，目前流行的 PC 浏览器中支持 WebGL 的有 Chrome, Firefox, Safari, IE11。移动浏览器支持的较少，iOS 8 中的 Safari 是支持的。</p>
<p>默认 ECharts-X 在不支持 WebGL 的环境中会提示浏览器不支持WebGL，这个提示的样式可以通过 class <code>.ecx-nowebgl</code> 配置。</p>
<p>但是如果在引入 ECharts-X 前就要判断浏览器是否支持 WebGL, 可以使用下面的脚本：</p>
<pre><code class="lang-javascript">try {
    var canvas = document.createElement(&#39;canvas&#39;);
    var gl = canvas.getContext(&#39;webgl&#39;) || canvas.getContext(&#39;experimental-webgl&#39;);
    if (!gl) {
        throw;
    }
} catch (e) {
    // 浏览器不支持 WebGL
}
</code></pre>
<p>另外如果浏览器不支持 WebGL, 建议可以将 <code>map3d</code>可以降级到使用 ECharts 的 <code>map</code>。</p>

            </article>
        </main>

        
<div style="clear:both;"></div>
<footer id="footer">
    <p class="maintained">Maintained by <a href="http://echarts.baidu.com/doc/about.html" target="_blank">ECharts</a> team</p>
    <ul class="links">
        <li><a target="_blank" href="http://echarts.baidu.com">ECharts</a></li>
        <li>·</li>
        <li><a target="_blank" href="http://tushuo.baidu.com/">Baidu 图说</a></li>
        <li>·</li>
        <li><a target="_blank" href="http://efe.baidu.com/">Baidu EFE</a></li>
        <li>·</li>
        <li><a target="_blank" href="http://weibo.com/echarts">Weibo</a></li>
    </ul>
</footer>

<script>
if (document.location.href.indexOf('local') == -1) {
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fb78830c9a5dad062d08b90b2bc0cf5da' type='text/javascript'%3E%3C/script%3E"));   
}
</script>

        <script src="../../lib/jquery.min.js"></script>
        <script src="../../lib/affix.js"></script>
        <script src="../../lib/prettify/prettify.js"></script>

        <link rel="stylesheet" href="../../lib/prettify/github.css">

        <script>
            $('#nav').affix({
                offset: {
                    top: 60,
                    bottom: 40
                }
            });

            $('pre').addClass('.prettyprint');

            prettyPrint();

            var $currentNav = $('#nav>ul>li.current');

            var $currentNavSub = $('<ul></ul>').appendTo($currentNav);
            $('#article h2, #article h3, #article h4').each(function (idx, $el) {
                var padding = 0;
                switch ($el.tagName.toLowerCase()) {
                    case 'h2':
                        padding = 20;
                        break;
                    case 'h3':
                        padding = 30;
                        break;
                    case 'h4':
                        padding = 40;
                        break;
                    case 'h5':
                        padding = 50;
                        break;
                }

                $el = $($el);
                var title = $el.html();
                $el.prepend('<a name="' + title + '"></a>');
                
                $('<li><a href="#' + title + '">' + title + '</a></li>')
                    .appendTo($currentNavSub)
                    .find('a').css('padding-left', padding + 'px');
            });
        </script>
    </body>
</head>
</html>